<template>
  <div>
      <div class="header-container">
            <div class="header" >   
                <div class="icon-back" v-on:click="back"></div>        
                <div class="title">上架商品</div>
                <div class="icon-more" @click="appear"></div>            
            </div>   
            <div class="more" v-show="show">
                <ul>
                    <router-link to="/msg"><li> <i class="msg"></i><span>消息</span></li></router-link>
                    <router-link to="/home"><li class="bottom"> <i class="home "></i><span>首页</span></li></router-link>
                </ul>
            </div>
      </div>
      <div class="goods">
          <div class="role">
               <div class="specific" v-if="item">                          
                <div class="specific_detail" >
                    <img v-if="item.type=='龙太子'" src="@/assets/imgs/0003.png" alt="">
                    <div class="info ">
                        <div class="row first">
                            <span class="gs" v-show="item.is_counteroffer==1"></span>
                            <span class="hj" v-if="item.is_counteroffer==2"></span>
                            <span class="name">{{item.united}}</span>
                            <span class="level">{{item.level}}级</span>
                            <span class="service">{{item.area1}}-{{item.area2}}</span>
                            <span class="platform"> 
                                <i class="apple" v-if="item.source==2"></i>
                                <i class="android" v-if="item.source==1"></i>
                            </span>
                        </div>
                        <div class="row">
                            <span class="all_point">总评分:{{item.score_total}}</span>
                            <span class="role_point">人物评分:{{item.score_role}}</span>
                            <span class="price">￥{{item.price}}</span>
                        </div>
                        <div class="row">
                            <span class="red" v-for="signitem in sp(item.sign)" :key="signitem">
                                {{signitem}}
                                </span>
                            <span class="sc">{{item.star}}人收藏</span>
                        </div>
                    </div>

            </div>
              
        </div>
          </div>
      </div>
      <div class="days">
          上架天数<span class="red">  14</span>
      </div>
      <div class="sale">
          <div class="sale-content">售价</div>
          <div class="sale-price">
              <span class="money">￥</span>
              <input type="tel" name="" id="" placeholder="61.00≤售价≤1500000.00" v-model="inputPrice">
            </div>
          <div class="sale-content">信息费
              <span class="red">-￥</span>
              <span :class="{redprice:infoCost(inputPrice)>60}">{{infoCost(inputPrice)}}</span>
                <span v-show="inputPrice<600||inputPrice==''">元起</span>
            </div>
          <div class="sale-content sale-actual">实际收入              
              <span class="red" v-if="inputPrice>60">￥{{inputPrice-infoCost(inputPrice)}}</span>
              <span class="red" v-else>￥0.00</span>
          </div>
      </div>
      <div class="accept">
          <div class="accept-txt">接受还价</div>
          <div class="choose" @click="choose()" :class="{active:isChoose}">
              <div class="circle" :class="{activecircle:isChoose}"></div>
          </div>
      </div>
      <div class="tips">
          温馨提示：<br>
          1.每天只能进行一次上架操作，下一次上架操作，需要下一个自然日0点开始计算。<br>
          2.角色上架7天内，改价范围为：首次上架价格的50%~150%，超过7天则不受此限制。<br>
          3.若选择接受买家还价，买家还价后会给您发送站内信。
      </div>
      <div class="btn">
          <div class="btn-disable" v-show="inputPrice<=60">上架</div>
        <div class="btnactive" v-show="inputPrice>60" @click="onShelf()">上架</div>
      </div>
      
      
  </div>
</template>

<script>
import axios from "axios";
export default {
    data(){
        return{
            show:false,
            item:{},
            isChoose:false,
            inputPrice:''
        }
    },
    computed:{
        sp(){
            return function(sign){
                return (sign+'').split(';');
            };
            },
        
    },
    methods:{
        back(){
            this.$router.go(-1);//返回上一层
        },
        appear(){
            this.show=!this.show
        },
        clean(){
        this.bargain='';
        },
        choose(){
            this.isChoose=!this.isChoose
            if(!this.isChoose){
                this.item.is_counteroffer=0
            }else{
                this.item.is_counteroffer=1

            }
        },
        infoCost(money){
            if(money<=600){
                return 60
            }else if(money<80000){
                return money*0.1

            }else if(money>=80000){
                return 8000
            }

        },
        onShelf(){
            var id =this.$route.query.id   
            var price=parseInt(this.inputPrice)
            var is_counteroffer=this.item.is_counteroffer
            axios.post("http://81.68.253.206:8081/role/onShelf",{"shop_id":id,"price":price,"is_counteroffer":is_counteroffer},{
             headers: {
                'token': localStorage.getItem("UserToken") }
        }
        ).then(res=>{
        if(res.data&&res.data.data&&res.data.status){
           this.$router.push({
                path: '/detail',
                query: {id: id}
                })
        }
        })
        }
    },
    mounted(){
     var id =this.$route.query.id   
     axios.get("http://81.68.253.206:8081/page/getRoleBase?id="+id
    ).then(res=>{
      if(res.data&&res.data.data&&res.data.status){
        this.item=res.data.data;
      }
    })
   },
    
    

}
</script>

<style lang="scss" scoped>
.header {
    position: fixed;
    top: 0;
    z-index: 4;
    width: 100%;
    height: rem(130);
    min-width: 320px;
    max-width: 750px;
    background-color: #fff;
    .title{
        width: 100%;
        height: rem(130);
        line-height: rem(130);
        text-align: center;
        font-size: rem(45);
        font-weight: 700;
    }    
    .icon-more {
        position: absolute;
        top: rem(40);
        right: rem(40);
        width: rem(60);
        height: rem(60);
        background: url(../../assets/imgs/more.svg) no-repeat 50% 50%;
        background-size: auto 100%;
        cursor: pointer;
    }
    .icon-back{
        position: absolute;
        top: rem(40);
        left: rem(40);
        width: rem(60);
        height: rem(60);
        background: url(../../assets/imgs/back.svg) no-repeat 50% 50%;
        background-size: auto 100%;
        cursor: pointer;
    }
}

.more{
    position: absolute;
    height: rem(300);
    width: rem(350);
    z-index: 999;
    top: rem(140);
    right: rem(20);
    background-color: #21202c;
    border-radius: rem(20);
    padding:0 rem(30);
    .bottom{
    border-top: 1px solid grey;
    }
    li{
        display: flex;
        width: 100%;
        height: rem(150);
        line-height:rem(150) ;
        font-size: rem(50);
        color: #fff;
        .msg{
            width: rem(60);
            height:rem(60);
            margin-top: rem(50);
            background: url(../../assets/imgs/xinfwhite.svg) no-repeat 50% 50%;
            background-size: auto 100%;
        }
        .home{
            width: rem(60);
            height:rem(60);
            margin-top: rem(50);
            background: url(../../assets/imgs/homewhite.svg) no-repeat 50% 50%;
            background-size: auto 100%;
        }
        .collection{
            width: rem(60);
            height:rem(60);
            margin-top: rem(50);
            background: url(../../assets/imgs/scwhite.svg) no-repeat 50% 50%;
            background-size: auto 100%;
        }
        span{
            margin-left: rem(30);
            flex: 1;
        }
    }
}
.more::after{
    content: '';
    display: block;
    width: rem(20);
    height: rem(20);
    position: absolute;
    right: rem(40);
    top: rem(-10);
    transform: rotate(45deg);
    opacity: .93;
    background-color: #21202c;
}
.goods{
    width: 100%;
    background-color: #fff;
    margin-top: rem(145);
    padding: 0 rem(30) rem(30) rem(30);
    .role{
        width: 100%;
        height: rem(300);
    }
    .counter-num{
        font-size: rem(40);
        color: #888;
        text-align: left;
        .red{
            color:#e74e4b;
        }
    }
}
.clear{clear:both;}
.specific_detail {
            position: relative;
            width: 100%;
            height:rem(260);
            line-height: rem(60); 
            padding:rem(40) 0;          
            border-top: 1px solid #f1f1f1;
            border-bottom: 1px solid #f1f1f1;
            img {
                float: left;
                margin-right: rem(30);
                width: rem(175);
                height: rem(175);
                border-radius: rem(15);
                border-top: 1px solid #f1f1f1;
            }
            .info {
                float: left;
                width: 60%;
                height: rem(175);

                .row {
                    width: 100%;
                    height:rem(60);
                    line-height: rem(60);
                .gs{
                        display: inline-block;
                        margin-bottom: rem(-10);
                        width: rem(50);
                        height: rem(50);
                        background: url(../../assets/imgs/gong.svg) no-repeat 50% 50%;
                        background-size: auto 100%;
                }
                .hj{
                        display: inline-block;
                        margin-bottom: rem(-10);
                        width: rem(50);
                        height: rem(50);
                        background: url(../../assets/imgs/hai.png) no-repeat 50% 50%;
                        background-size: auto 100%;
                    }
                    .name{
                    font-size: rem(45);
                    border-right: 1px solid #f1f1f1;
                    padding-right: rem(15);
                    margin-left: rem(15);
                    }
                    .level {
                    color: #888;
                    margin-left: rem(10);
                    font-size: rem(35);
                    }
                    .all_point{
                    color: #888;
                    font-size: rem(35);
                    }
                    .role_point{
                    color: #888;
                    font-size: rem(35);
                    }
                    .red {
                        color: #e74e4b;
                        font-size: rem(35);
                        border: 1px solid #e74e4b;
                        border-radius: 3px;
                        margin-right: rem(10);
                    }
                    .service {
                        position: absolute;
                        right: rem(50);
                        color: #888;
                        font-size: rem(35);
                    }

                    .platform {
                        position: absolute;
                        right: 0px;
                        margin-top: rem(5);
                    }

                    .apple {
                        display: inline-block;
                        width: rem(50);
                        height: rem(50);
                        background: url(../../assets/imgs/apple.svg) no-repeat 50% 50%;
                        background-size: auto 100%;
                    }
                    .android{
                        display: inline-block;
                        width: rem(45);
                        height: rem(45);
                        background: url(../../assets/imgs/android1.svg) no-repeat 50% 50%;
                        background-size: auto 100%;
                    }
                    .price {
                        position: absolute;
                        right: 0px;
                        font-size: rem(50);
                        font-weight: 700;
                        color: #e74e4b;
                    }

                    .sc {
                        position: absolute;
                        right: 0px;
                        color: #888;
                        font-size: rem(35);
                    }

                }
            }
}
.days{
    margin-top: rem(15);
    height: rem(100);
    line-height: rem(100);
    background-color: #fff;
    padding: 0 rem(30);
    font-size: rem(40);
    .red{
        color: #e74e4b;
    }
}
.sale{
    margin-top: rem(15);
    background-color: #fff;
    padding:0 rem(30);
    .sale-price{
        position: relative;
        height: rem(110);
        line-height: rem(110);
        display: flex;
        border: 1px solid #ccc;
        border-radius: rem(15);
        .money{
            position: absolute;
            top: rem(0);
            left: rem(30);
            font-size: rem(40);
            color: #e74e4b;
            font-weight: 500;
        }
        input{
            margin-left: rem(100);
            flex: 1;
            height: rem(100);
            outline: none;
            border: none;
            font-size: rem(38);
            color: #888;
        }
        

    }
    .sale-content{
        height: rem(125);
        line-height: rem(125);
        font-size: rem(40);
        .red{
            color: #e74e4b;
            margin-left: rem(30);
            margin-right: rem(30);
        }
        .redprice{
            color: #e74e4b;

        }
    }
    .sale-actual{
        border-top: 1px solid #f5f5f5;
    }
}
.accept{
    position: relative;
    margin-top: rem(15);
    height: rem(125);
    background-color: #fff;
    padding:0 rem(30);
    font-size: rem(40);
    .accept-txt{
        height: rem(125);
        line-height: rem(125);

    }
    .active{
        background: #e74e4b!important;
        .activecircle{        
            width: rem(60)!important;
            height: rem(60)!important;
            background-color: #fff!important;
            border-radius: rem(30)!important;
            top: rem(5)!important;
            left: rem(85)!important;
        }   
    }
    .choose{
        position: absolute;
        top: rem(30);
        right: rem(30);
        width:rem(150);
        height: rem(70);
        background: #f5f5f5;
        border-radius: rem(30);
        transition: all .15s ease;

        .circle{
            position: absolute;
            width: rem(60);
            height: rem(60);
            background-color: #fff;
            border-radius: rem(30);
            top: rem(5);
            left: rem(5);
            transition: all .15s ease;
        }
    }

}
.tips{
    margin-top: rem(15);
    margin-bottom: rem(200);
    height: rem(250);
    font-size: rem(40);
    line-height: rem(70);
}
.btn{
    position: fixed;
    bottom: 0;
    z-index: 2;
    padding: rem(30);
    min-width: 320px;
    max-width: 750px;
    width: 100%;
    background-color: #f5f5f5;
    .btn-disable{
        width: 100%;
        height: rem(120);
        line-height: rem(120);
        background-color: #bbb;
        color: #fff;
        border-radius: rem(60);
        font-size: rem(45);
        text-align: center;
        cursor: default;
        pointer-events: none
    }
    .btnactive{
         width: 100%;
        height: rem(120);
        line-height: rem(120);
        background-color: #e74e4b;
        color: #fff;
        border-radius: rem(60);
        font-size: rem(45);
        text-align: center;

    }
}

    
</style>
